import { ButtonGroup, Card as SemiCard, Row, Col } from "@douyinfe/semi-ui";
import { useModel } from "umi";

import GatewayCard from "../components/gateway/Card";
import PersonFullInfo from "../components/person/FullInfo";

const GatewayOrganizations = () => {
    const { windowInnerHeight } = useModel("global");
    const { selectedGateway } = useModel("gateway.info");

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={6}>
                    <GatewayCard cardBodyHeight={cardBodyHeight} />
                </Col>
                <Col span={18}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}>当前网关部署信息</span>}
                        headerExtraContent={<ButtonGroup></ButtonGroup>}
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: 10, height: cardBodyHeight - 2, overflow: "auto" }}
                    >
                        {selectedGateway?.url && <PersonFullInfo />}
                    </SemiCard>
                </Col>
            </Row>
        </div>
    );
};

export default GatewayOrganizations;
